<template>
  <div>
    <el-dialog
      title="替代料"
      width="960px"
      :visible.sync="dialogVisible"
    >
      <p class="text-right">
        <el-button-group>
          <el-tooltip
            v-for="(item, k) in groupList"
            :key="k"
            :content="item.tooltipContent"
            placement="top"
          >
            <el-button v-if="item.value === '02'" :disabled="!multipleSelection.length" :vlaue="item.value" @click="ClickGroup(item.value)">
              <i class="iconfont" :class="item.icon"></i> </el-button>
            <el-button v-else :vlaue="item.value" @click="ClickGroup(item.value)"> <i class="iconfont" :class="item.icon"></i> </el-button>
          </el-tooltip>
        </el-button-group>
      </p>
      <el-table
        v-loading="dialogLoading"
        :data="dialogtableData"
        style="width: 100%"
        height="300"
        @selection-change="handleDialogSelectionChange"
      >
        <el-table-column
          type="selection"
          width="40"
        />
        <el-table-column type="index" label="序号" width="80"></el-table-column>
        <el-table-column
          v-for="(item, index) in dialogTableColumn"
          :key="item.id || index"
          :prop="item.prop"
          :label="item.label"
          :type="item.type"
          :min-width="item.minWidth"
          :width="item.width"
          :show-overflow-tooltip="true"
        ></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button class="cancel-btn" type="text" @click="handleClose">取 消</el-button>
        <el-button class="submit-btn" type="primary" plain @click="handleSave">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import BasicTableColumn from '@/components/frontPage/BasicTableColumn'

import { getAllBomReplace, deleteBomReplace, addsObjectBomReplace } from '@/api/frontPage/materials'
export default {
  name: 'DialogAlternativeMaterials',
  components: {
    // BasicTableColumn
  },
  data() {
    return {
      bomId: this.$parent.id,
      searchVal: '',
      dialogVisible: false,
      dialogLoading: false,
      dbSelectId: '',
      multipleSelection: [],
      dialogtableData: [],
      dialogTableColumn: [
        { prop: 'code', label: '编码', minWidth: '70' },
        { prop: 'description', label: '描述', minWidth: '70' },
        { prop: 'unit', label: '单位', minWidth: '90' },
        { prop: 'substitutionRatio', label: '替代比例', minWidth: '90' },
        { prop: 'preferredLevel', label: '优先等级', minWidth: '90' },
        { prop: 'tag', label: '位号', minWidth: '90' },
        { prop: 'remark', label: '备注', minWidth: '100' }
      ],
      type: {
        '1': '物料固有替代料',
        '2': 'bom维护添加的替代料'
      },
      groupList: [
        { tooltipContent: '添加', value: '01', icon: 'iconicon_add' },
        { tooltipContent: '删除', value: '02', icon: 'iconicon_trash' },
        { tooltipContent: '粘贴', value: '03', icon: 'iconniantie' }
      ]
    }
  },
  watch: {
    dialogVisible(val) {
      if (val) this.getAllBomReplaceData()
    }
  },
  created() {
    // this.getAllBomReplaceData()
  },
  methods: {
    /* 保存 */
    handleSave() {
      const query = {
        'bomId': this.$parent.multipleSelection[0] || this.dbSelectId,
        'replaceIds': this.multipleSelection
      }
      addsObjectBomReplace(query).then((res) => {
        this.$message.success(res.message)
      })
      this.handleClose()
    },
    /** 获取(bom-替代料表)分页数据列表--bomId 必须有值 */
    getAllBomReplaceData() {
      const query = {
       	// 'code': '',
        // 'description': '',
        // 'id': '',
        // 'preferredLevel': '',
        // 'remark': '',
        // 'substitutionRatio': '',
        // 'tag': '',
        // 'type': '',
        // 'unit': '',
        // 'replaceId': '',
        'bomId': this.bomId
      }
      getAllBomReplace(query).then((res) => {
        this.dialogtableData = res.result
      }).catch((res) => {
        this.$message.error(res.message)
      })
    },
    /* 批量删除(对象-替代料表)数据 */
    deleteBomReplaceData() {
      const ids = this.multipleSelection
      deleteBomReplace(ids).then((res) => {
        this.$message.success(res.message)
        this.getAllBomReplaceData()
        this.multipleSelection = []
      })
    },
    /** 关闭 */
    handleClose() {
      this.dialogVisible = false
      this.dbSelectId = ''
    },
    ClickGroup(val) {
      switch (val) {
        case '01':
          // 添加
          this.$parent.$refs.dialogAdd.isBomAdd = 0
          this.$parent.$refs.dialogAdd.dialogVisible = true
          break
        case '02':
          // 删除
          this.deleteBomReplaceData()
          break
        case '03':
          // 粘贴
          break
      }
    },

    handleDialogSelectionChange(val) {
      this.multipleSelection = val.map(el => el.id)
    }
  }
}
</script>

<style lang="scss" scoped>
$pdx14: 14px;
.bom {
  &-header {
    padding: 17px 10px;
    border: 1px solid #EFF2F7;
    border-bottom: none;
  }
  .actionbar {
    margin: 0;
    li.list-inline-item {
      color: #495057;
      margin-right: 18px;
      &.border-line {
        &::before {
          content: "";
          width: 1px;
          margin-right: 16px;
          height: 1.1rem;
          border-left: 1px solid rgba(#495057, 0.5);
        }
      }
    }
  }
  ::v-deep .el-radio-group {
  label {
    margin: 0;
  }
  .el-radio-button {
    border: none;
    .el-radio-button__inner {
      .iconfont {
        font-size: 12px;
      }
    }
  }
}
  .table-wrap {
    position: relative;
    .mask-layer {
      position: absolute;
      top: 0;
      bottom: 0px;
      left: 0;
      right: 0;
      // background: rgba(0, 0, 0, 0.03);
      z-index: 999999999;
      border: 1px dashed #556de671;
      background: rgba(255, 255, 255, 0.8);
      display: grid;
      font-size: 17px!important;
      font-weight: bold;
      justify-items: center;
      align-items: center;
    }
  }
}
</style>
